<template>
    <div class="center-body">
        <div class="map" id="map"></div>
        <div class="rest-button" v-if="showButton" @click="reChinaMap()">返回吉林省</div>
    </div>
  </template>
  
  <script>
import * as echarts from "echarts";
import { getjilinMap } from "@/utils/jilingshiMap.js";
export default {
  data() {
    return {
      showButton: true, //是否显示返回按钮
      currentCity: "", //当前城市
      // 市json数据名称
      province: {
        长春市: "changchunshi",
        吉林市: "jilinshi",
        通化市: "tonghuashi",
        四平市: "sipingshi",
        白山市: "baishanshi",
        辽源市: "liaoyuanshi",
        白城市: "baichengshi",
        延边朝鲜族自治州: "yanbianchaoxianzuzizhiqu",
        松原市: "songyuanshi"
      },
      //地图展示数据
      mapData: getjilinMap()
    };
  },
  created() {},
  mounted() {
    this.reChinaMap();
  },
  methods: {
    drawMap(name, json) {
      // 判断地图是否渲染
      let myChart = echarts.getInstanceByDom(document.getElementById("map"));
      // 如果渲染则清空地图
      if (myChart != null) {
        myChart.dispose();
      }
      // 初始化地图
      myChart = echarts.init(document.getElementById("map"));
      if (!json) {
        json = require("@/json/jilin.json");
        this.showButton = false;
      }

      echarts.registerMap(name, json);

      let currentCity = this.currentCity;
      let seriesData = [];
      let markData = [];
      if (currentCity) {
        let tempData = this.mapData.filter(x => x.name == currentCity);
        seriesData = tempData[0].mapArea;
      } else {
        debugger
        seriesData = this.mapData;
        this.mapData.forEach(x => {
          if (x.markPoints) {
            markData.push(...x.markPoints);
          }
        });
      }
      var option = {
        visualMap: {
          // 视觉映射组件
          type: "piecewise",
          show: true,
          bottom: "2%",
          left: "2%",
          textStyle: {
            fontsize: 12
          },

          //左下角切片
          pieces: [
            {
              gt: 600,
              lte: 1000,
              label: "600-1000个"
            },
            {
              gt: 400,
              lte: 600,
              label: "400-600个"
            },
            {
              gt: 200,
              lte: 400,
              label: "200-400个"
            },
            {
              gt: 0,
              lte: 200,
              label: "0-200个"
            }
          ],
          color: ["#F56C6C", "#E6A23C", "#67C23A", "#409EFF"] //自定义范围的颜色
        },
        tooltip: {
          // 悬浮框
          trigger: "item", // 触发条件
          backgroundColor: "RGBA(136, 123, 135, 0.8)",
          formatter: "{b}<br/>占用数：{c}个", // 自定义显示数据
          textStyle: {
            color: "#ffffff"
          }
        },
        series: [
          {
            type: "map",
            map: name,
            zoom: 1.2,
            top: "10%",
            x: "center",
            label: {
              show: true,
              color: "#770928"
            },
            itemStyle: {
              normal: {
                // 静态的时候显示的默认样式
                borderWidth: 1, // 边框宽度
                areaColor: "#C0C4CC", // 地图颜色
                borderColor: "#ffffff" // 边框颜色
              },
              emphasis: {
                // 鼠标移入动态的时候显示的默认样式
                borderWidth: 2, // 边框宽度
                areaColor: "#909399" // 地图颜色
              }
            },
            markPoint: {
              /**
               * 标记的图形，标记类型包括：'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'
               * 可以通过 'image://url' 设置为图片，其中 URL 为图片的链接，或者 dataURI。
               */
              symbol: "circle",
              //标记的大小，可以设置成诸如 10 这样单一的数字，也可以用数组分开表示宽和高，例如 [20, 10] 表示标记宽为20，高为10。
              symbolSize: 6,
              //文字标签
              label: {
                show: false, //是否显示标签
                position: "top", //标签的位置
                color: "#ffffff", //文字的颜色
                fontSize: 12 //文字的字体大小
              },
              //标注的样式
              itemStyle: {
                opacity: 0.8, //图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
                color: "#ffffff" //图形的颜色。支持使用rgb(255,255,255)，rgba(255,255,255,1)，#fff等方式设置为纯色，也支持设置为渐变色和纹理填充。
              },
              silent: true, //图形是否不响应和触发鼠标事件，默认为 false，即响应和触发鼠标事件。
              /**
               * 标注的数据数组。每个数组项是一个对象：{ name: '舒兰市', coord: [126.97170, 44.41223], value: '78', symbolSize: 10, },
               * name 标注名称
               * coord 数据在相应坐标系上的坐标位置 经纬度值
               * value 标注值，可以不设。
               * symbolSize 标记的大小，可以单独设置每个标记的大小
               */
              data: markData
            },
            // 数据
            data: seriesData
          }
        ]
      };
      myChart.setOption(option);

      myChart.on("click", e => {
        this.darwProvniceMap(e);
      });
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    },
    // 切换市
    darwProvniceMap(val) {
      console.log(val);
      this.currentCity = val.name;
      if (this.province[val.name]) {
        let json = require(`@/json/${this.province[val.name]}.json`);
        this.drawMap(this.province[val.name], json);
        this.showButton = true;
      }
    },
    // 返回吉林省
    reChinaMap() {
      this.currentCity = "";
      this.drawMap("jilin");
    }
  }
};
</script>
  
  <style scoped>
.rest-button {
  position: absolute;
  right: 20px;
  bottom: 20px;
  z-index: 999;
  border-radius: 6px;
  font-size: 14px;
  border: 1px #770928 solid;
  color: #770928;
  height: 30px;
  line-height: 28px;
  padding: 0 20px;
  overflow: hidden;
  box-sizing: border-box;
  cursor: pointer;
}

.map,
.center-body {
  width: 800px;
  height: 600px;
  position: relative;
}
</style>
